﻿<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:xn="http://www.renren.com/2009/xnml"> 
<head> 
<%
String session_key = request.getParameter("xn_sig_session_key");
 if(session_key==null||session_key.equals("")){
 		out.print("<script type=\"text/javascript\"> top.location.href=\"http://app.renren.com/apps/tos.do?v=1.0&api_key=bdb958de863b42a29bc02ae80897e618&next=http://apps.renren.com/jjj_abc/\"</script>");
		return;
	}
%>

 
 
<style> 
* { padding:0; margin:0;}
img { border:0;}
a,img {
    star:expression(this.onFocus=this.blur()); 
 outline:none;
}
a {
 color:#025521; 
 text-decoration:none;
}
a:hover { 
 color:#009900;
}

/*Tooltips*/
.tooltips{
position:relative; /*这个是关键*/
z-index:2;
cursor:pointer;padding:1px;height:12px;
font-size:10px;
text-decoration: none;
}
.tooltips:hover{
z-index:3;
background:none; /*没有这个在IE中不可用*/
text-decoration: none;
}
.tooltips span{
display: none;
}
.tooltips:hover span{ /*span 标签仅在 :hover 状态时显示*/
display:inline-block;
position:absolute;
top:21px;
left:9px;
padding: 3px;
color:white;
background-color:#005EAC;_border-bottom:1px solid #114580;
text-decoration: none;
 width:15em;
}
.tooltips_arr:hover span{
background:url(http://xnimg.cn/imgpro/arrow/tooltip-arrow.gif) no-repeat -4px top;
}



li {
display: list-item;
float: left;
height: 69px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
width: 60px;
}
.aimg{
color: #005EAC;
cursor: pointer;
display: block;
height: 45px;
margin-bottom: 0px;
margin-left: 7px;
margin-right: 8px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-decoration: underline;
width: 45px;
}
.lispan{
display: block;
height: 24px;
margin-bottom: 0px;
margin-left: 7px;
margin-right: 8px;
margin-top: 0px;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: center;
width: 45px;
text-align:center;

}
.renrena{
color: #005EAC;
cursor: pointer;
display: block;
float: left;
height: 24px;
line-height: 24px;
margin-bottom: 0px;
margin-left: 0px;
margin-right: 0px;
margin-top: 0px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 0px;
padding-left: 0px;
padding-right: 0px;
padding-top: 0px;
text-align: left;
text-decoration: none;
white-space: nowrap;
width: 36px;
font-size:12px
}
.header{
background-attachment: scroll;
background-clip: border-box;
background-color: #F0F5F8;
background-image: none;
background-origin: padding-box;
border-top-color: #333;
border-top-style: none;
border-top-width: 0px;
clear: both;
display: block;
font-size: 12px;
font-weight: bold;
height: 14px;
overflow-x: hidden;
overflow-y: hidden;
padding-bottom: 5px;
padding-left: 8px;
padding-right: 8px;
padding-top: 5px;
text-align: left;
zoom: 1;
}
#loading{z-index:1;padding:5px 0 5px 9px;
background:#c44;left:0;top:0;width:90px;
color:#fff;position:fixed}
</style> 

<title>人人GMap</title></head> 
  <body onLoad="initialize()" onUnload="GUnload()"> 
 <div id='loading'>正在加载</div>
<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=true_or_false&amp;key=ABQIAAAAelbhwzvnvfKVKgmsyQcbAxTOa2_st-1Hs28TKXR8rCrx5JW4JRQbm0OW-y1MUgHxDvAKI-GBKCLK5g&hl=zh-CN&sensor=false" type="text/javascript"></script> 
<script type="text/javascript"src="http://www.google.com/jsapi?key=ABQIAAAAelbhwzvnvfKVKgmsyQcbAxTOa2_st-1Hs28TKXR8rCrx5JW4JRQbm0OW-y1MUgHxDvAKI-GBKCLK5g"></script>
<link type="text/css" rel="stylesheet" href="css/module.css"  media="all" /> 
<script type="text/javascript"> 
google.load("jquery", "1.3.1");

 var map;
    function initialize() {
$("#friends_xn").load("table.jsp",{"xn_sig_session_key" : "<%=session_key%>"});
      if (GBrowserIsCompatible()) {
        map = new GMap2(document.getElementById("map_canvas"));
        map.setCenter(new GLatLng(30.586204, 103.521574), 13);
        map.setZoom(5);
		map.addControl(new GLargeMapControl());
/*	geoXml = new GGeoXml("http://jjjabc123.appspot.com/dyxc.kml");
	map.addOverlay(geoXml);*/
      }
    }
    // addAddressToMap() is called when the geocoder returns an
    // answer.  It adds a marker to the map with an open info window
    // showing the nicely formatted version of the address and the country code.
    function addAddressToMap(response) {
      map.clearOverlays();
      if (!response || response.Status.code != 200) {
        alert("Sorry, we were unable to geocode that address");
      } else {
        place = response.Placemark[0];
        point = new GLatLng(place.Point.coordinates[1],
                            place.Point.coordinates[0]);
        marker = new GMarker(point);
        map.addOverlay(marker);
        marker.openInfoWindowHtml(place.address + '<br>' +
          '<b>Country code:</b> ' + place.AddressDetails.Country.CountryNameCode);
      }
    }
 
    // showLocation() is called when you click on the Search button
    // in the form.  It geocodes the address entered into the form
    // and adds a marker to the map at that location.
    function showLocation() {
      var address = document.forms[0].q.value;
      geocoder.getLocations(address, addAddressToMap);
    }
 
   // findLocation() is used to enter the sample addresses into the form.
    function findLocation(address) {
      document.forms[0].q.value = address;
      showLocation();
    }
	
	var JJJtinyurl
	var JJJaddress
	var JJJname
	function createMarker(point,tinyurl,name,address) {
		var latlng = point;
      var marker = new GMarker(latlng);
	  map.openInfoWindowHtml(latlng, "<img src=\""+tinyurl+"\">"+name+"<br>"+address);
      GEvent.addListener(marker,"click", function() {
        var myHtml = "<div><div style=\"float: left;\"><img src=\""+tinyurl+"\"></div><div style=\"float: right;\">"+name+"<br>"+address+"</div></div>";
        map.openInfoWindowHtml(latlng, myHtml);
      });
      return marker;
	}
	function addpoint(point) {
	
		if (!point) {
		  } else {
			map.setCenter(point, 5);
			map.addOverlay(createMarker(point,JJJtinyurl,JJJname,JJJaddress));

		  }
			
	}
	  
	var geocoder = new GClientGeocoder();
	
	function showAddress(address) {
	  if(address+'.' == 'undefined.'){
	  	alert(JJJname+'未定义家乡');
	  }else {
	  	geocoder.getLatLng(address,addpoint);
	  }
	}
	
	function addpointOutinfo(point) {
		  if (!point) {
		  } else {
			map.setCenter(point, 5);
			var JJJmarker = new GMarker(point);
			map.addOverlay(JJJmarker);
		  }
	}
	
	function addP(address){
	  if(address+'.' == 'undefined.'){
	  }else {
	  	geocoder.getLatLng(address,addpointOutinfo);
	  }
	}
	function JJJshowAddress(address,tinyurl,name,info) {
		JJJaddress = address;
		JJJtinyurl = tinyurl;
		JJJname = name;
		if(info){
			showAddress(address);
		}else{
			addP(address);
		}
	}
	function disKML(kmlurl)
	{
		geoXml = new GGeoXml(kmlurl);
		map.addOverlay(geoXml);
		map.setCenter(new GLatLng(30.586204, 103.521574), 15);
	}
 
</script> 



 
	   <div  style="width:auto; height:10px; " id="top"> 
	   
	   </div> 
	   
		<DIV style="WIDTH: 500px; HEIGHT: 500px; float: left;" id=map_canvas> 
		</DIV> 
 <div style="WIDTH: 210px; HEIGHT: 320px; float:left">
 <div style="margin:10px">
 <div>
 <div  class="header" style="WIDTH: 176px;"> 
 	好友 </div>
	
  <div id="friends_xn" style="WIDTH: 190px; HEIGHT: 266px; overflow: auto;overflow-x:hidden; border:#006699 1pt dashed">
    <div align="center" style=" margin-top:100px">
      <p><img src="img/ajax-loader.gif" alt="loading..." width="32" height="32" align="middle" />  </p>
      <p style="font-size:12px">载入好友信息中..</p>
    </div>
  </div> 
  </div>
  </div>
  <div style="WIDTH: 190px; HEIGHT:180px;margin:10px ">
    <p style="font-size:12px">人人GMap实验室</p>
			   <p><a href="javascript:void(0)" onClick="disKML('http://ditu.google.com/maps/ms?hl=zh-CN&ie=UTF8&vps=1&jsv=197c&brcurrent=h3,0x31508e64e5c642c1:0x951daa7c349f366f%3Bh5,0&msa=0&output=nl&msid=117600000550119871642.00047579edf23e3387857')" class="tooltips">大邑小吃<span>显示大邑的部分小吃~测试~</span></a><a href="http://maps.google.com/maps/ms?ie=UTF&msa=0&msid=
117600000550119871642.00047579edf23e3387857" class="tooltips" target="_blank">      协作<span>点开在google中修改“大邑小吃”</span></a></p>
			   <p>&nbsp;</p>
			   <p> <img src="http://code.google.com/appengine/images/appengine-silver-120x30.gif" alt="由 Google App Engine 提供支持" /></p>
  </div> 
 
		
	 
	 
 </div>
<div class="top123"  style=" clear:both; height:10px" id="down">
	</div>
	<script>$('#loading').hide()</script>
</body> 
</html> 
 
      